<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>云医院住院流程</title>
  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="../../css/elementUI/index.css">
  <!-- 引入iconfont矢量图 -->
  <link rel="stylesheet" href="../../assets/icon/iconfont.css">
  <!-- 引入 echarts.js -->
  <script src="../../js/echarts/echarts.js"></script>
  <!-- 引入echarts关系图相关数据 -->
  <script src="../../js/echarts/option/hospitalization/hospitalization.js"></script>
  <script src="../../js/echarts/option/hospitalization/hospitalNurse.js"></script>
  <script src="../../js/echarts/option/hospitalization/publicConnection.js"></script>
  <script src="../../js/echarts/option/hospitalization/hospitalDoctor.js"></script>
  <script src="../../js/echarts/option/hospitalization/pharmacy.js"></script>
  <script src="../../js/echarts/option/hospitalization/processSelect.js"></script>
  <script src="../../js/echarts/option/hospitalization/surgery.js"></script>
  <script src="../../js/echarts/option/hospitalization/noSystem.js"></script>
</head>
<body>
  <div id="app" v-cloak>
    <el-container>
        <el-aside width="auto" style="background-color: #545c64;">
            <el-menu default-active="1-4-1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">
                <i class="iconfont icon-liucheng"></i>
                <span slot="title">导航一</span>
                </template>
                <el-menu-item-group>
                <span slot="title">分组一</span>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                <span slot="title">选项4</span>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
                <i class="iconfont icon-wenhao"></i>
                <span slot="title">使用指导</span>
            </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
                <el-header height="auto">
                        <i id="collapseButton" style="float: left; padding: 3px 3px" class="iconfont icon-caidanzhankai" @click="changeCollapse()">{{collapseText}}</i>
                        <el-button style="float: right; padding: 3px 3px" type="warning" @click="displayChange()" plain v-cloak>{{ displayText }}</el-button>
                        <el-button style="float: right; padding: 3px 3px" type="primary" @click="drawer=true" plain v-cloak>流程选择</el-button>
                </el-header>
            <el-main>
                <el-popover
                placement="right-end"
                width="400"
                trigger="manual"
                v-model="visible">
                    <span v-cloak>{{ nodeTitle }}</span>
                    <el-button style="float: right; padding: 3px 3px" type="danger" icon="iconfont icon-guanbi" @click="popover()" circle></el-button>
                    <el-divider></el-divider>
                    <el-table :data="gridData"
                    :header-cell-style="cellStyle"
                    @current-change="handleCurrentChange"
                    highlight-current-row>
                        <el-table-column width="400" property="operation" label="详细操作"></el-table-column>
                    </el-table>
                    <div id="main" style="width: 1000px;height:800px;" slot="reference" @click="popover()"></div>
                </el-popover>
                <el-drawer
                title="流程选择"
                size="342px"
                :visible.sync="drawer"
                :direction="direction">
                    <el-container>
                        <el-header height="auto">
                            <el-input
                            placeholder="请输入查找内容"
                            prefix-icon="iconfont icon-search"
                            v-model="input" clearable>
                            </el-input>
                        </el-header>
                        <el-main id="tableMain" style="height: 600px;">
                            <el-table :data="processes"
                            row-key="value"
                            lazy
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                            :header-cell-style="cellStyle"
                            @current-change="processChange"
                            highlight-current-row>
                                <el-table-column width="300" property="label" label="详细流程"></el-table-column>
                            </el-table>
                        </el-main>
                    </el-container>
                </el-drawer>
            </el-main>
        </el-container>
    </el-container>
  </div>
</body>
<style>
html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    margin: 0;
    padding: 0;
}
[v-cloak] {
    display: none;
}
#app{
    height: 100%;
}
.el-container{
    height: 100%;
    border: 1px solid #eee;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
<!-- 引入Vue -->
<script src="../../js/vue/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="../../js/elementUI/index.js"></script>
<script>
var popoverTitle = "";
var paramsName = "";
var currentGridData = [];
var currentClickPopover = false;
var tempGridData = hospitalizationHandle;
tempGridData = Object.assign({},tempGridData,hospitalNurseHandle);
tempGridData = Object.assign({},tempGridData,hospitalDoctorHandle);
tempGridData = Object.assign({},tempGridData,surgeryHandle);
var currentDisplayCross = true;

openHref = function(href,step,functionality,doubt) {
    window.location.href="../document/main.html?href="+href
                            +"&step="
                            +JSON.stringify(step)
                            +"&functionality="
                            +JSON.stringify(functionality)
                            +"&doubt="
                            +JSON.stringify(doubt)
                            +"&PreviousPage="
                            +"../echart/process.html";
};
new Vue({
    el: '#app',
    data: {
        nodeTitle: "",
        gridData: [],
        visible: false,
        displayText: '竖屏显示',
        isCollapse: true,
        direction: "rtl",
        drawer: false,
        collapseText: '展开菜单',
        processes: processes,
        select: null,
        input: '',
    },
    watch: {
        input: function (val) {
            if(val == ''){
                this.processes = processes;
            } else {
                var pattern = new RegExp("[\u4E00-\u9FA5]+");
                var condition = '';
                //判断使用中文还是拼音
                if (pattern.test(val)) {
                    condition ='label';
                } else {
                    condition ='value';
                    val = val.toLowerCase();
                }
                this.processes = this.recursiveCycling(processes,val,condition);
            }
        }
    },
    methods: {
        popover() {
            if(currentClickPopover) {
                if(!this.visible && typeof currentGridData != "undefined" && typeof currentGridData.length != "undefined" && currentGridData.length > 1) {
                    this.visible = !this.visible;
                } else {
                    for(i in currentGridData) {
                        if(paramsName == currentGridData[i].operation) {
                            if(currentGridData[i].href != undefined) {
                                openHref(currentGridData[i].href,currentGridData[i].step,currentGridData[i].functionality,currentGridData[i].doubt);
                            }
                        }
                    }
                }
                this.nodeTitle = popoverTitle;
                currentClickPopover = false;
                this.gridData = currentGridData;
            } else {
                if(this.visible) {
                    this.visible = !this.visible;
                }
            }
        },
        displayChange() {
            tempX = 0;
            tempY = 0;
            var tempData = option.series[0].data;
            for(i in tempData) {
                tempX = tempData[i].x;
                tempY = tempData[i].y;
                tempData[i].x = tempY;
                tempData[i].y = tempX;
            }
            option.series[0].data = tempData;
            myChart.setOption(option);
            currentDisplayCross = !currentDisplayCross;
            if(currentDisplayCross) {
                this.displayText = '竖屏显示';
            } else {
                this.displayText = '横屏显示';
            }
        },
        changeCollapse() {
            this.isCollapse = !this.isCollapse;
            if(this.isCollapse) {
                this.collapseText = '展开菜单';
                document.getElementById('collapseButton').setAttribute('class','iconfont icon-caidanzhankai')
            } else {
                this.collapseText = '收起菜单';
                document.getElementById('collapseButton').setAttribute('class','iconfont icon-caidanshouqi')
            }
        },
        handleCurrentChange(val) {
            this.currentRow = val;
            openHref(val.href,val.step,val.functionality,val.doubt);
        },
        processChange(val){
            console.log(val);
            var newData = [];
            for (i in currentData) {
                for (j in val.processes) {
                    if (currentData[i].name == val.processes[j].name) {
                        newData.push(currentData[i]);
                    }
                }
            }
            option.series[0].data = newData;
            myChart.setOption(option);
        },
        recursiveCycling(jsonArray,val,condition){
            var temp = [];
                for (i in jsonArray) {
                    currentObject = jsonArray[i];
                    //值是否模糊匹配查询条件，匹配则整个数组显示，否则看子对象
                    if (currentObject[condition].indexOf(val)>=0) {
                        temp.push(currentObject);
                    } else {
                        if (currentObject.children != undefined) {
                            temp = temp.concat(this.recursiveCycling(currentObject.children,val,condition));
                        }
                    }
                }
            return temp;
        },
        cellStyle(){
            return 'background-color: dimgrey;color: floralwhite;';
        }
    }
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
    paramsName = params.name;
    popoverTitle = '“'+params.name+'”操作选择';
    if(params.dataType == "node") {
        currentGridData = tempGridData[params.name];
    }
    if(params.dataType == "edge") {
        currentGridData = tempGridData[params.data.source]==undefined?[]:tempGridData[params.data.source];
        currentGridData = currentGridData.concat(tempGridData[params.data.target]==undefined?[]:tempGridData[params.data.target]);
    }
    currentClickPopover = true;
});
//分类
var categories = [{name: '医院流程(不操作系统)',itemStyle:{color: '#333'}},
{name: '住院处',itemStyle:{color: '#337ab7'}},
{name: '住院护士',itemStyle:{color: '#8f2890'}},
{name: '住院医生',itemStyle:{color: '#a22f02'}},
{name: '住院药房',itemStyle:{color: '#a77500'}},
{name: '手术室/医技科室',itemStyle:{color: '#084a01'}},
{name: '门诊医生',itemStyle:{color: '#b20202'}},];
//初始化各个模块节点
var currentData = hospitalization.data;
currentData = currentData.concat(hospitalNurse.data);
currentData = currentData.concat(hospitalDoctor.data);
currentData = currentData.concat(noSystem.data);
currentData = currentData.concat(pharmacy.data);
currentData = currentData.concat(surgery.data);
//初始化连接线
var currentLinks = hospitalization.links;
currentLinks = currentLinks.concat(publicConnection.links);
currentLinks = currentLinks.concat(hospitalNurse.links);
// 指定图表的配置项和数据
var option = {
    tooltip: {
        show: true,
        confine: true,
    },
    toolbox: {
        id: 'echartToolBox',
        show: true,
        top: 20,
        right:20,
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    legend: [{
        // selectedMode: 'single',
        data: categories.map(function (a) {
            return a.name;
        })
    }],
    series : [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: false,
            focusNodeAdjacency: true,
            categories: categories,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 12
                    }
                }
            },
            data: currentData,
            links: currentLinks,
            lineStyle: {
                normal: {
                    color: 'source',
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            },
            emphasis: {
                lineStyle: {
                    width: 20
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>